<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="场站id" prop="id">
        <el-input
          v-model="queryParams.id"
          placeholder="请输入场站id"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="场站名" prop="mingzi">
        <el-input
          v-model="queryParams.mingzi"
          placeholder="请输入场站名"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['ruoyi-yuce:changzhan:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['ruoyi-yuce:changzhan:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['ruoyi-yuce:changzhan:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['ruoyi-yuce:changzhan:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="changzhanList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="场站id" align="center" prop="id" />
      <el-table-column label="场站名" align="center" prop="mingzi" />
      <el-table-column label="网络id" align="center" prop="netid" />
      <el-table-column label="子网络id" align="center" prop="subnetid" />
      <el-table-column label="动力公司id" align="center" prop="powercorpid" />
      <el-table-column label="场站类型" align="center" prop="stationtype" />
      <el-table-column label="电压等级1id" align="center" prop="dianyadengji1id" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['ruoyi-yuce:changzhan:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['ruoyi-yuce:changzhan:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改场站对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="场站名" prop="mingzi">
          <el-input v-model="form.mingzi" placeholder="请输入场站名" />
        </el-form-item>
        <el-form-item label="网络id" prop="netid">
          <el-input v-model="form.netid" placeholder="请输入网络id" />
        </el-form-item>
        <el-form-item label="子网络id" prop="subnetid">
          <el-input v-model="form.subnetid" placeholder="请输入子网络id" />
        </el-form-item>
        <el-form-item label="动力公司id" prop="powercorpid">
          <el-input v-model="form.powercorpid" placeholder="请输入动力公司id" />
        </el-form-item>
        <el-form-item label="电压等级1id" prop="dianyadengji1id">
          <el-input v-model="form.dianyadengji1id" placeholder="请输入电压等级1id" />
        </el-form-item>
        <el-form-item label="电压等级2id" prop="dianyadengji2id">
          <el-input v-model="form.dianyadengji2id" placeholder="请输入电压等级2id" />
        </el-form-item>
        <el-form-item label="电压等级3id" prop="dianyadengji3id">
          <el-input v-model="form.dianyadengji3id" placeholder="请输入电压等级3id" />
        </el-form-item>
        <el-form-item label="电压等级4id" prop="dianyadengji4id">
          <el-input v-model="form.dianyadengji4id" placeholder="请输入电压等级4id" />
        </el-form-item>
        <el-form-item label="电压等级5id" prop="dianyadengji5id">
          <el-input v-model="form.dianyadengji5id" placeholder="请输入电压等级5id" />
        </el-form-item>
        <el-form-item label="电压等级6id" prop="dianyadengji6id">
          <el-input v-model="form.dianyadengji6id" placeholder="请输入电压等级6id" />
        </el-form-item>
        <el-form-item label="CZAQTian" prop="czaqtian">
          <el-input v-model="form.czaqtian" placeholder="请输入CZAQTian" />
        </el-form-item>
        <el-form-item label="PDSrcNum" prop="pdsrcnum">
          <el-input v-model="form.pdsrcnum" placeholder="请输入PDSrcNum" />
        </el-form-item>
        <el-form-item label="PDSrcUse" prop="pdsrcuse">
          <el-input v-model="form.pdsrcuse" placeholder="请输入PDSrcUse" />
        </el-form-item>
        <el-form-item label="QDSrcNum" prop="qdsrcnum">
          <el-input v-model="form.qdsrcnum" placeholder="请输入QDSrcNum" />
        </el-form-item>
        <el-form-item label="QDSrcUse" prop="qdsrcuse">
          <el-input v-model="form.qdsrcuse" placeholder="请输入QDSrcUse" />
        </el-form-item>
        <el-form-item label="PDCoef" prop="pdcoef">
          <el-input v-model="form.pdcoef" placeholder="请输入PDCoef" />
        </el-form-item>
        <el-form-item label="QDCoef" prop="qdcoef">
          <el-input v-model="form.qdcoef" placeholder="请输入QDCoef" />
        </el-form-item>
        <el-form-item label="PJFDCoef" prop="pjfdcoef">
          <el-input v-model="form.pjfdcoef" placeholder="请输入PJFDCoef" />
        </el-form-item>
        <el-form-item label="QJFDCoef" prop="qjfdcoef">
          <el-input v-model="form.qjfdcoef" placeholder="请输入QJFDCoef" />
        </el-form-item>
        <el-form-item label="JiFenDL" prop="jifendl">
          <el-input v-model="form.jifendl" placeholder="请输入JiFenDL" />
        </el-form-item>
        <el-form-item label="NobodyOnDuty" prop="nobodyonduty">
          <el-input v-model="form.nobodyonduty" placeholder="请输入NobodyOnDuty" />
        </el-form-item>
        <el-form-item label="BrandFlag" prop="brandflag">
          <el-input v-model="form.brandflag" placeholder="请输入BrandFlag" />
        </el-form-item>
        <el-form-item label="AlarmGra" prop="alarmgra">
          <el-input v-model="form.alarmgra" placeholder="请输入AlarmGra" />
        </el-form-item>
        <el-form-item label="AlarmGraLayer" prop="alarmgralayer">
          <el-input v-model="form.alarmgralayer" placeholder="请输入AlarmGraLayer" />
        </el-form-item>
        <el-form-item label="AlarmGraX" prop="alarmgrax">
          <el-input v-model="form.alarmgrax" placeholder="请输入AlarmGraX" />
        </el-form-item>
        <el-form-item label="AlarmGraY" prop="alarmgray">
          <el-input v-model="form.alarmgray" placeholder="请输入AlarmGraY" />
        </el-form-item>
        <el-form-item label="FREQUENCY" prop="frequency">
          <el-input v-model="form.frequency" placeholder="请输入FREQUENCY" />
        </el-form-item>
        <el-form-item label="PASFLAG" prop="pasflag">
          <el-input v-model="form.pasflag" placeholder="请输入PASFLAG" />
        </el-form-item>
        <el-form-item label="DTSFLAG" prop="dtsflag">
          <el-input v-model="form.dtsflag" placeholder="请输入DTSFLAG" />
        </el-form-item>
        <el-form-item label="DAUSEFLAG" prop="dauseflag">
          <el-input v-model="form.dauseflag" placeholder="请输入DAUSEFLAG" />
        </el-form-item>
        <el-form-item label="EXSTATIONFLAG" prop="exstationflag">
          <el-input v-model="form.exstationflag" placeholder="请输入EXSTATIONFLAG" />
        </el-form-item>
        <el-form-item label="YCUSEDFLAG" prop="ycusedflag">
          <el-input v-model="form.ycusedflag" placeholder="请输入YCUSEDFLAG" />
        </el-form-item>
        <el-form-item label="PLOSSFLAG" prop="plossflag">
          <el-input v-model="form.plossflag" placeholder="请输入PLOSSFLAG" />
        </el-form-item>
        <el-form-item label="PCoef" prop="pcoef">
          <el-input v-model="form.pcoef" placeholder="请输入PCoef" />
        </el-form-item>
        <el-form-item label="QCoef" prop="qcoef">
          <el-input v-model="form.qcoef" placeholder="请输入QCoef" />
        </el-form-item>
        <el-form-item label="FUELSTORAGE" prop="fuelstorage">
          <el-input v-model="form.fuelstorage" placeholder="请输入FUELSTORAGE" />
        </el-form-item>
        <el-form-item label="WATERSTORAGE" prop="waterstorage">
          <el-input v-model="form.waterstorage" placeholder="请输入WATERSTORAGE" />
        </el-form-item>
        <el-form-item label="VarFlag" prop="varflag">
          <el-input v-model="form.varflag" placeholder="请输入VarFlag" />
        </el-form-item>
        <el-form-item label="WorkMode" prop="workmode">
          <el-input v-model="form.workmode" placeholder="请输入WorkMode" />
        </el-form-item>
        <el-form-item label="CosUpLmt" prop="cosuplmt">
          <el-input v-model="form.cosuplmt" placeholder="请输入CosUpLmt" />
        </el-form-item>
        <el-form-item label="CosDnLmt" prop="cosdnlmt">
          <el-input v-model="form.cosdnlmt" placeholder="请输入CosDnLmt" />
        </el-form-item>
        <el-form-item label="BaoHuID" prop="baohuid">
          <el-input v-model="form.baohuid" placeholder="请输入BaoHuID" />
        </el-form-item>
        <el-form-item label="LoadID" prop="loadid">
          <el-input v-model="form.loadid" placeholder="请输入LoadID" />
        </el-form-item>
        <el-form-item label="BHFlagID" prop="bhflagid">
          <el-input v-model="form.bhflagid" placeholder="请输入BHFlagID" />
        </el-form-item>
        <el-form-item label="KeTouID" prop="ketouid">
          <el-input v-model="form.ketouid" placeholder="请输入KeTouID" />
        </el-form-item>
        <el-form-item label="KeQieID" prop="keqieid">
          <el-input v-model="form.keqieid" placeholder="请输入KeQieID" />
        </el-form-item>
        <el-form-item label="NengTouID" prop="nengtouid">
          <el-input v-model="form.nengtouid" placeholder="请输入NengTouID" />
        </el-form-item>
        <el-form-item label="NengQieID" prop="nengqieid">
          <el-input v-model="form.nengqieid" placeholder="请输入NengQieID" />
        </el-form-item>
        <el-form-item label="ZDQID" prop="zdqid">
          <el-input v-model="form.zdqid" placeholder="请输入ZDQID" />
        </el-form-item>
        <el-form-item label="ZDQDeltaID" prop="zdqdeltaid">
          <el-input v-model="form.zdqdeltaid" placeholder="请输入ZDQDeltaID" />
        </el-form-item>
        <el-form-item label="ZDUUpID" prop="zduupid">
          <el-input v-model="form.zduupid" placeholder="请输入ZDUUpID" />
        </el-form-item>
        <el-form-item label="ZDUDnID" prop="zdudnid">
          <el-input v-model="form.zdudnid" placeholder="请输入ZDUDnID" />
        </el-form-item>
        <el-form-item label="PolyState" prop="polystate">
          <el-input v-model="form.polystate" placeholder="请输入PolyState" />
        </el-form-item>
        <el-form-item label="EMSControlArea" prop="emscontrolarea">
          <el-input v-model="form.emscontrolarea" placeholder="请输入EMSControlArea" />
        </el-form-item>
        <el-form-item label="latitude" prop="latitude">
          <el-input v-model="form.latitude" placeholder="请输入latitude" />
        </el-form-item>
        <el-form-item label="longtitude" prop="longtitude">
          <el-input v-model="form.longtitude" placeholder="请输入longtitude" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listChangzhan, getChangzhan, delChangzhan, addChangzhan, updateChangzhan } from "@/api/ruoyi-yuce/changzhan";

export default {
  name: "Changzhan",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 场站表格数据
      changzhanList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        id: null,
        mingzi: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        id: [
          { required: true, message: "场站id不能为空", trigger: "blur" }
        ],
        mingzi: [
          { required: true, message: "场站名不能为空", trigger: "blur" }
        ],
        netid: [
          { required: true, message: "网络id不能为空", trigger: "blur" }
        ],
        powercorpid: [
          { required: true, message: "动力公司id不能为空", trigger: "blur" }
        ],
        stationtype: [
          { required: true, message: "场站类型不能为空", trigger: "change" }
        ],
        dianyadengji1id: [
          { required: true, message: "电压等级1id不能为空", trigger: "blur" }
        ],
        dianyadengji2id: [
          { required: true, message: "电压等级2id不能为空", trigger: "blur" }
        ],
        dianyadengji3id: [
          { required: true, message: "电压等级3id不能为空", trigger: "blur" }
        ],
        dianyadengji4id: [
          { required: true, message: "电压等级4id不能为空", trigger: "blur" }
        ],
        dianyadengji5id: [
          { required: true, message: "电压等级5id不能为空", trigger: "blur" }
        ],
        dianyadengji6id: [
          { required: true, message: "电压等级6id不能为空", trigger: "blur" }
        ],
        nengqieid: [
          { required: true, message: "NengQieID不能为空", trigger: "blur" }
        ],
        zdqid: [
          { required: true, message: "ZDQID不能为空", trigger: "blur" }
        ],
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询场站列表 */
    getList() {
      this.loading = true;
      listChangzhan(this.queryParams).then(response => {
        this.changzhanList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        mingzi: null,
        netid: null,
        subnetid: null,
        powercorpid: null,
        stationtype: null,
        dianyadengji1id: null,
        dianyadengji2id: null,
        dianyadengji3id: null,
        dianyadengji4id: null,
        dianyadengji5id: null,
        dianyadengji6id: null,
        czaqtian: null,
        pdsrcnum: null,
        pdsrcuse: null,
        qdsrcnum: null,
        qdsrcuse: null,
        pdcoef: null,
        qdcoef: null,
        pjfdcoef: null,
        qjfdcoef: null,
        jifendl: null,
        nobodyonduty: null,
        brandflag: null,
        alarmgra: null,
        alarmgralayer: null,
        alarmgrax: null,
        alarmgray: null,
        frequency: null,
        pasflag: null,
        dtsflag: null,
        dauseflag: null,
        exstationflag: null,
        ycusedflag: null,
        plossflag: null,
        pcoef: null,
        qcoef: null,
        fuelstorage: null,
        waterstorage: null,
        varflag: null,
        workmode: null,
        cosuplmt: null,
        cosdnlmt: null,
        baohuid: null,
        loadid: null,
        bhflagid: null,
        ketouid: null,
        keqieid: null,
        nengtouid: null,
        nengqieid: null,
        zdqid: null,
        zdqdeltaid: null,
        zduupid: null,
        zdudnid: null,
        polystate: null,
        emscontrolarea: null,
        latitude: null,
        longtitude: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加场站";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getChangzhan(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改场站";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateChangzhan(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addChangzhan(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除场站编号为"' + ids + '"的数据项？').then(function() {
        return delChangzhan(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('ruoyi-yuce/changzhan/export', {
        ...this.queryParams
      }, `changzhan_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
